<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>边框练习</title>
		<!-- 
		    1.画圆形
			2.画正三角形
	    思路1：  html    div元素
		        css     倒角，必须有边框
		思路2： html     div元素 triangle
		        css     斜边
				        不设置宽高
						左边框：50像素实线红色   transparent
						右边框：50像素实线黄色   transparent
						下边框：50像素实线蓝色   透明度  .3
						 颜色值：rgba（255,255,0,3）
		 -->
		 <style>
			 /* 1.画圆 */
			 div#circle{
				 width: 300px;   
				 height: 300px;
				 border: 1px solid red;
				 border-radius: 50%;
				 /* 边框阴影属性  box-shadow: ; */
				 box-shadow: 5px 5px 50px 10px red inset; 
				 
				 }
				 /* 2.正三角形 */
			 div#triangle{
				 border-left: 50px solid transparent;
				 border-right: 50px solid transparent;
				 border-bottom: 50px solid rgba(0,0,255,3);
				 /* 两行：全部设置为透明色，上面的三角设置颜色 */
				 border: 50px solid transparent;
				 border-top-color: rgba(0,0,255,3);
			 }
			 input{
				 outline: 1px solid red;
				 outline: 0;
			 }
		 </style>
	</head>
	<body>
		<div id="circle"></div>
		<div id="triangle"></div>
		文本框: <input type="text">l
	</body>
</html>